<template>
    <img
        class="stamps"
        :src="PUBLIC_URL + '/common-pass.png'"
        alt=""
        v-if="leave.state == 16 || leave.state == 22 || leave.state == 4"
    />
    <div class="content" v-loading.fullscreen="fullscreenLoading">
        <div class="detail">
            <span>申请状态</span>
            <span v-if="leave.state == 16">班主任已通过</span>
            <span v-else-if="leave.state == 22">系部主任已通过</span>
            <span v-else-if="leave.state == 5">家长已通过,班主任审核中</span>
            <span v-else-if="leave.state == 4">家长已通过</span>
            <span v-else>家长未审核</span>
        </div>
        <div class="detail">
            <span>姓名</span>
            <span>{{ leave.studentName }}</span>
        </div>
        <div class="detail">
            <span>学号</span>
            <span>{{ leave.studentNumber }}</span>
        </div>
        <div class="detail">
            <span>班级</span>
            <span>{{ leave.className }}</span>
        </div>
        <div class="detail">
            <span>请假类型</span>
            <span v-if="leave.leaveType == 1">事假（因公请假）</span>
            <span v-else-if="leave.leaveType == 2">病假</span>
            <span v-else-if="leave.leaveType == 3">补假</span>
            <span v-else-if="leave.leaveType == 4">留宿申请</span>
            <span v-else>事假（因私请假）</span>
        </div>
        <div class="detail hostel">
            <span style="border: none">宿舍</span>
            <span style="width: 30%; height: 100%">{{
                leave.buildingName
            }}</span>
            <span style="width: 15%; height: 100%">{{
                leave.floorName + '楼'
            }}</span>
            <span style="width: 15%; height: 100%">{{ leave.dormNum }}</span>
        </div>
        <div class="detail">
            <span>留宿开始时间</span>
            <span>{{ leave.startTime }}</span>
        </div>
        <div class="detail">
            <span>留宿结束时间</span>
            <span>{{ leave.endTime }}</span>
        </div>
        <div class="detail">
            <span>留宿理由</span>
            <span>{{ leave.reason }}</span>
        </div>

        <div class="detail">
            <span>审批人</span>
            <span v-if="vetting.headTeacher.detail">{{
                vetting.headTeacher.detail
            }}</span>
            <span v-else-if="vetting.parent.detail">{{
                vetting.parent.detail
            }}</span>
            <span v-else>暂无审批人</span>
        </div>
        <div
            class="detail"
            :class="{ noshow: !vetting.sapprover.detail !== '' }"
        >
            <span>第二审批人</span>
            <span v-if="vetting.sapprover">{{ vetting.sapprover.detail }}</span>
        </div>
        <div
            class="detail"
            :class="{ noshow: !vetting.eapprover.detail !== '' }"
        >
            <span>最终审批人</span>
            <span v-if="vetting.eapprover">{{ vetting.eapprover.detail }}</span>
        </div>
        <div class="detail" style="height: 100rem">
            <span>防伪码：</span>
            <div class="code">
                <img
                    :src="`${API_BASE_URL}v1/biz/leaves/QRcode/${route.params.id}/`"
                    alt=""
                    ref="code"
                />
                <h3>(截图时请展示)</h3>
            </div>
        </div>
        <div
            class="delete"
            v-show="
                leave.state !== 16 && leave.state !== 22 && leave.state !== 4
            "
        >
            <el-button
                @click="delectLeave"
                style="width: 90%"
                size="large"
                type="primary"
                >撤销申请</el-button
            >
        </div>
    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import { reqLeaveImages, reqDeleteLeave, getstay } from '@/api/student';
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const code = ref();
const router = useRouter();
const leave = ref({});
const vetting = ref({
    parent: {
        detail: ''
    },
    headTeacher: {
        detail: ''
    },
    sapprover: {
        detail: ''
    },
    eapprover: {
        detail: ''
    }
});

const API_BASE_URL = import.meta.env.VITE_APP_BASE_API;
const fullscreenLoading = ref(true);
const getLeaveImages = async id => {
    const res = await reqLeaveImages(id);
    return res;
};
const route = useRoute();
const getleaveContent = async () => {
    const res = await getstay(route.params.id);
    fullscreenLoading.value = false;
    if (res.status === '200') {
        console.log(res);
        leave.value = res.data;
        const beforeApprover = leave.value.beforeApprover;
        if (beforeApprover[2]) {
            vetting.value.parent = {
                detail: `${Object.keys(beforeApprover[2])[0]}(${
                    Object.values(beforeApprover[2])[0]
                })`
            };
        }
        if (beforeApprover[6]) {
            vetting.value.headTeacher = {
                detail: `${Object.keys(beforeApprover[6])[0]}(${
                    Object.values(beforeApprover[6])[0]
                })`
            };
        }
        if (beforeApprover[13]) {
            vetting.value.sapprover = {
                detail: `${Object.keys(beforeApprover[13])[0]}(${
                    Object.values(beforeApprover[13])[0]
                })`
            };
        }
        if (beforeApprover[19]) {
            vetting.value.eapprover = {
                detail: `${Object.keys(beforeApprover[19])[0]}(${
                    Object.values(beforeApprover[19])[0]
                })`
            };
        }
    }
    console.log(vetting.value);
};

getleaveContent();

const delectLeave = async () => {
    const form = {
        id: route.params.id
    };

    const res = await reqDeleteLeave(form);
    if (res.resultCode === '200') {
        ElMessage({
            type: 'success',
            message: '撤销成功'
        });
        router.push('/student/index');
    }
};
</script>

<style lang="scss" scoped>
@import url('./style/records.scss');
.content {
    margin-top: 20rem;
    position: relative;
    width: 100%;
    height: 80vh;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-around;
}
.stamps {
    position: absolute;
    width: 140rem;
    height: 140rem;
    right: 15rem;
    bottom: 200rem;
    z-index: 999;
}
.detail {
    display: flex;
    width: 90vw;
    height: 30rem;
    font-size: 14rem;
}

.detail span:first-child {
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    margin-right: 10rem;
}

.detail span:last-child {
    width: 65%;
    height: 100%;
    border-radius: 5rem;
    border: 1px solid #d0d0d0;
    color: #545454;
    display: flex;
    justify-content: start;
    align-items: center;

    & {
        padding-left: 5rem;
    }
}

.content .code {
    width: 65%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;

    img {
        width: 60rem;
        height: 60rem;
    }
    h3 {
        padding-left: 5rem;
        color: #a52a2a;
    }
}
.noshow {
    display: none;
}

.delete {
    margin-top: 10rem;
    width: 100vw;
    height: 70rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
p {
    width: 85vw;
    color: #d11f11;
    margin: 10rem auto;
    font-size: 10rem;
}

.hostel span {
    border: 1px solid #d0d0d0;
    height: 60%;
    border-radius: 5rem;
    border: 1px solid #d0d0d0;
    color: #545454;
    display: flex;
    justify-content: start;
    align-items: center;
    margin-right: 10rem;

    & {
        padding-left: 5rem;
    }
}
</style>
